<template>
	<a-card :bordered="false">

		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<template>
						<a-col :md="6" :sm="8">
							<a-form-item label="用户姓名">
								<a-input placeholder="请输入用户姓名查询" v-model="queryParam.realName"></a-input>
							</a-form-item>
						</a-col>

						<a-col :md="6" :sm="8">
							<a-form-item label="手机号码">
								<a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>
							</a-form-item>
						</a-col>
					</template>

					<a-col :md="6" :sm="8">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="resetParam" icon="reload" style="margin-left: 8px">重置
							</a-button>
						</span>
					</a-col>

				</a-row>
			</a-form>
		</div>

		<!-- table区域-begin -->
		<div>
			<a-table ref="table" bordered size="middle" rowKey="userId" :columns="columns" :dataSource="dataSource"
				:pagination="ipagination" :loading="loading"
				@change="handleTableChange">

				<template slot="avatarslot" slot-scope="text, record">
					<div class="anty-img-wrap">
						<a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user" />
					</div>
				</template>

<!--				<span slot="loginNumber" slot-scope="text, record">-->
<!--					<a @click="showTable(record)">在线 {{record.loginNumber}}</a>-->
<!--					&lt;!&ndash; <a @click="handleEdit(record)">编辑</a> &ndash;&gt;-->
<!--				</span>-->

        <span slot="action" slot-scope="text, record">
					<a @click="showTable(record)">强制下线</a>
				</span>

			</a-table>
		</div>
		<!-- table区域-end -->

    <user-online-model ref="model" @dataUpdate="loadData"></user-online-model>
	</a-card>
</template>	

<script>
  import UserOnlineModel from './modules/UserOnlineModel'
	import { JeecgListMixin } from '@/mixins/JeecgListMixin'

	export default {
		name: "UserOnline",
		mixins: [JeecgListMixin],
		components: {
      UserOnlineModel,
		},
		data() {
			return {
				description: '这是用户管理页面',
				queryParam: {
					mobile: "",
					realName: "",
					userType: undefined
				},
				recycleBinVisible: false,
				columns: [
					{
						title: '用户账号',
						align: "center",
						dataIndex: 'loginName',
						width: 120
					},
					{
						title: '用户姓名',
						align: "center",
						width: 100,
						dataIndex: 'realName',
					},
					{
						title: '手机号码',
						align: "center",
						width: 100,
						dataIndex: 'mobile'
					},
          {
            title: '邮箱',
            align: "center",
            width: 100,
            dataIndex: 'email'
          },
					{
						title: '登录数量',
						dataIndex: 'loginNumber',
						scopedSlots: {
							customRender: 'loginNumber'
						},
						align: "center",
						width: 100
					},
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            },
            align: "center",
            width: 170
          }

				],
				url: {
					list: "/sys/user/online-page",
				},
			}
		},
		computed: {
		},
		methods: {
			resetParam() {
				this.queryParam = {}
				this.queryParam.userType = undefined
				this.loadData(1)
			},
      showTable(record) {
        this.$refs.model.setUserID(record.userId, record.loginName)
        this.$refs.model.showModel(true);
      }
		}

	}
</script>
<style scoped>

</style>
